<!--
 * @Descripttion: 
 * @version: 
 * @Author: 宁乃楚
 * @Date: 2021-07-04 23:23:18
 * @LastEditors: 宁乃楚
 * @LastEditTime: 2021-07-06 10:48:38
-->
<template>
  <div class="Certification">
      <van-sticky :offset-top="0">
        <van-nav-bar
          title="实名认证"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    <div class="form">
      <van-form>
        <van-field
          v-model="form.realname"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{ required: true, message: '请填写真实姓名' }]"
        />
        <van-field
          v-model="form.idCard"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: true, message: '请填写身份证号' },{validator, message: '身份证号码格式错误！'}]"
        />
        <van-field
          v-model="form.bankCard"
          name="银⾏卡号"
          label="银⾏卡号"
          placeholder="银⾏卡号"
          :rules="[{ required: true, message: '请填写银⾏卡号' },]" 
        />
        <van-field name="uploader" label="身份证正⾯照">
          <template #input>
            <van-uploader
              :after-read="afterRead1"
              v-model="fileList1"
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field name="uploader" label="身份证反⾯照">
          <template #input>
            <van-uploader
              :after-read="afterRead2"
              v-model="fileList2"
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field name="uploader" label="银⾏卡照⽚">
          <template #input>
            <van-uploader
              :after-read="afterRead3"
              v-model="fileList3"
              :max-count="1"
            />
          </template>
        </van-field>
        <div class="btn">
          <van-button round block type="info" @click="submitHandler"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
import { post_formData, post } from "../../http/axios";
import { Toast } from "vant";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来⾃⽗组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      form: {},
      fileList1: [],
      fileList2: [],
      fileList3: [],
    };
  },
  methods: {
    // 引入user vuex中的方法
    ...mapActions("user", ["getUserInfo"]),
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    //返回上⼀⻚⾯
    toBack() {
      this.$router.push({ path: "/manager/mine" });
    },
    // 身份证正面照片上传
    afterRead1(file, detail) {
      let formData = new FormData();

      formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));

      post_formData("http://121.199.29.84:8001/file/upload", formData).then(
        (res) => {
          if (res.data.status === 200) {
            this.form.idcardPhotoPositive =
              "http://121.199.29.84:8888/" +
              res.data.data.groupName +
              "/" +
              res.data.data.id;
            this.fileList1 = [
              {
                url:
                  "http://121.199.29.84:8888/" +
                  res.data.data.groupName +
                  "/" +
                  res.data.data.id,
              },
            ];
          }
        }
      );
    },
    // 身份证背面照片上传
    afterRead2(file, detail) {
      console.log(this.dataURLtoFileFun(file.content));
      let formData = new FormData();

      formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));

      post_formData("http://121.199.29.84:8001/file/upload", formData).then(
        (res) => {
          if (res.data.status === 200) {
            this.form.idcardPhotoNegative =
              "http://121.199.29.84:8888/" +
              res.data.data.groupName +
              "/" +
              res.data.data.id;
            this.fileList2 = [
              {
                url:
                  "http://121.199.29.84:8888/" +
                  res.data.data.groupName +
                  "/" +
                  res.data.data.id,
              },
            ];
          }
        }
      );
    },
    // 银行卡照片上传
    afterRead3(file, detail) {
      console.log(file);
      let formData = new FormData();

      formData.append("file", this.dataURLtoFileFun(file.content, "file.jpg"));

      post_formData("http://121.199.29.84:8001/file/upload", formData).then(
        (res) => {
          console.log(res.data);
          console.log(this.form);
          if (res.data.status === 200) {
            this.form.bankCardPhoto =
              "http://121.199.29.84:8888/" +
              res.data.data.groupName +
              "/" +
              res.data.data.id;
            this.fileList3 = [
               {
                url:
                  "http://121.199.29.84:8888/" +
                  res.data.data.groupName +
                  "/" +
                  res.data.data.id,
              },
            ];
          }
        }
      );
    },
    // bae64转⽂件对象
    dataURLtoFileFun(dataurl, filename) {
      // 将base64转换为⽂件，dataurl为base64字符串，filename为⽂件名（必须带后缀名，如.jpg,.png）
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },
    // 身份证格式验证
     validator (val) {
      const card15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/
      const card18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      return card15.test(val) || card18.test(val)
    },
    //提交审核
    submitHandler() {
      this.form.userId = this.userInfo.id
      post("/certification/submitCertificationApply", this.form).then((res) => {
        console.log(this.form.bankCard);
          if (res.data.status === 200) {
          Toast(res.data.message);
          this.$router.push("/manager/mine");
        } else {
          Toast(res.data.message);
        }W
      });
    },
  },
  computed: {
    // 引入user vuex中的方法
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.getUserInfo();
  },
  watch: {},
  beforeDestroy() {},
  destroyed() {},
};
</script>

<style scoped>
.Certification /deep/ .van-nav-bar__title {
  color: white !important;
  font-size: 16px;
}
.Certification /deep/ .van-nav-bar {
  background-color: #fa5882;
  margin: 0;
  font-size: 16px;
}
.Certification /deep/ .van-nav-bar__text {
  color: white !important;
  font-size: 16px;
}
.Certification /deep/ .van-icon {
  color: white !important;
  font-size: 16px;
}
</style>